<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: whitesmoke;
        }

        .header {
            width: 500px;
            height: 100px;
            margin: 0 auto;
            text-align: center;
            line-height: 40px;
            box-shadow: inset 0 -6px 10px 1px;
        }

        .header input {
            padding: 10px;
            outline: none;
        }

        button {
            padding: 10px;
        }

        .body {
            width: 1000px;
            /* height: 540px; */
            background-color: aqua;
            margin: 0 auto;
            box-shadow: inset 0 -6px 10px 1px;
            padding-bottom: 20px;
        }

        .body div {
            border-bottom: 1px solid;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 20px;
            font-weight: bold;
            margin: 5px 20px;
        }

        div span {
            width: 240px;
        }

        .page {
            width: 1000px;
            height: 50px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="getlist">
            <input type="text" placeholder="请输入条码数" value="1">
            <input type="text" placeholder="请输入条数" id="">
            <button>查看</button>
        </div>
        <button>查找</button>
        <div class="addlist">
            <input type="text" placeholder="请输入要添加的用户名" id="">
            <input type="text" placeholder="请输入他的content" id="">
            <button>添加</button>
        </div>
    </div>
    <div class="body">
        <div>
            <span>小明</span>
            <span>你好</span>
            <span>2022-1-10</span>
            <button>删除</button>
        </div>
    </div>
    <div class="page">

    </div>
    <script>
        let body = document.querySelector('.body')
        let ipts1 = document.querySelectorAll(".getlist input")
        let btn1 = document.querySelector('.getlist button')
        let ipts2 = document.querySelectorAll(".addlist input")
        let btn2 = document.querySelector('.addlist button')
        let btn3 = document.querySelector('.header>button')


        //显示数据把数据创建添加到 然后
        btn1.onclick = function () {


            let xhr = new XMLHttpRequest()
            xhr.open('get', `http://wish.byesame.com/wish?page=${ipts1[0].value}&rows=${ipts1[1].value = 10}`)
            xhr.setRequestHeader('token', localStorage.getItem('token'))
            xhr.send()
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    let data = JSON.parse(xhr.responseText)
                    console.log(data);
                    let list = data.data.list
                    getItem(list)
                }
            }
        }

        function getItem() {
            let xhr = new XMLHttpRequest()
            xhr.open('get', `http://wish.byesame.com/wish?page=${ipts1[0].value}&rows=${ipts1[1].value = 10}`)
            xhr.setRequestHeader('token', localStorage.getItem('token'))
            xhr.send()
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    let data = JSON.parse(xhr.responseText)
                    console.log(data);
                    let list = data.data.list
                    let num = data.data.count
                    body.innerHTML = ""
                    for (let i in list) {
                        let div = document.createElement("div")
                        let sp1 = document.createElement("span")
                        let sp2 = document.createElement("span")
                        let sp3 = document.createElement("span")
                        let btn = document.createElement("button")
                        btn.setAttribute("data-id", list[i].id)
                        btn.onclick = removeItem
                        sp1.innerText = list[i].name;
                        sp2.innerText = list[i].content;
                        sp3.innerText = list[i].createdAt;
                        btn.innerText = "删除";
                        div.appendChild(sp1)
                        div.appendChild(sp2)
                        div.appendChild(sp3)
                        div.appendChild(btn)
                        body.appendChild(div);
                    }
                    let n = Math.ceil(num / 10)
                    if (n > 10) {

                        n = 10
                        let btn =document.createElement('button')
                        btn.innerHTML = "……"
                        document.querySelector('.page').innerHTML= ""
                    }
                    for (let j = 1; j <= n; j++) {
                        
                        let btn = document.createElement('button')

                        btn.innerHTML = j
                        document.querySelector('.page').appendChild(btn)
                        btn.onclick = function () {
                            ipts1[0].value = j
                            getItem()
                        }
                    }

                }
            }
        }
        getItem()
        function removeItem() {
            let id = this.getAttribute('data-id')
            let xhr = new XMLHttpRequest()
            xhr.open('delete', 'http://wish.byesame.com/wish')
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
            xhr.setRequestHeader('token', localStorage.getItem('token'))
            xhr.send(`id=${id}`)
            xhr.onreadystatechange = function () {
                if (xhr.readyState = 4) {
                    let dele = JSON.parse(xhr.responseText)
                    console.log(dele);
                    if (dele.code == 200) {
                        console.log("删除成功");
                        
                        getItem();
                    }

                }
            }
        }
        function addItem() {
            let xhr = new XMLHttpRequest()
            xhr.open('post', 'http://wish.byesame.com/wish')
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
            xhr.setRequestHeader('token', localStorage.getItem('token'))
            xhr.send(`name=${ipts2[0].value}&content=${ipts2[1].value}&role=3`)
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    let data = JSON.parse(xhr.responseText)
                    console.log(data);
                }
            }
        }
        btn2.addEventListener('click', addItem)

        function idGetItem(){

            let xhr = XMLHttpRequest()
            xhr.open('get',`http://wish.byesame.com/wish:id?:id=${ipts1[0].value}`)
            xhr.setRequestHeader('token',localStorage.getItem('token'))
            xhr.send()
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    let a= JSON.parse(xhr.responseText)
                    console.log(a);
                    
                }
            }
        }
        btn3.addEventListener('click',idGetItem)















    </script>
</body>

</html>